@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables";

@mixin transition($transition...) {
    -webkit-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

@mixin img-responsive($display: block) {
    display: $display;
    max-width: 100%; // Part 1: Set a maximum relative to the parent
    height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

.thumbnail {
    border: 4px solid $cwhite;
    border-radius: 0;
    padding: 0;
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
    border-color: $cwhite;
    box-shadow: $box-shadow;
}

.thumbnail-noactive {
    border: 4px solid $cwhite;
    border-radius: 0;
    padding: 0;
    display: block;
    margin-bottom: $line-height-computed;
    line-height: $line-height-base;
    background-color: $thumbnail-bg;
    @include transition(border .2s ease-in-out);

    > img,
    a > img {
        @include img-responsive;
        margin-left: auto;
        margin-right: auto;
    }

    .caption {
        padding: $thumbnail-caption-padding;
        color: $thumbnail-caption-color;
    }
}
